<template>
  <section>
    <el-button size="mini" type="primary" @click="addBtn">+</el-button>
    <el-table :data="indexList">
      <el-table-column type="index"/>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" style="width: 100px" v-model="scope.row.name"></el-input>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" style="width: 100px" v-model="scope.row.description"/>
          <span v-else>{{scope.row.description}}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">
          <el-button size="mini" :type="scope.row.edit?'':'primary'" @click="editBtn(scope.row)">{{scope.row.edit?'取消':'编辑'}}</el-button>
          <el-button v-if="scope.row.edit" size="mini" type="success" @click="confirmBtn(scope.row)">确认</el-button>
          <el-button v-else size="mini" type="danger" @click="delBtn(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'
  export default {
    name: "editIndex",
    props:['tacticsId'],
    data(){
      return{
        indexList:null
      }
    },
    watch:{
      tacticsId(nv,ov){
        this.init(nv)
      }
    },
    created(){
      this.init(this.tacticsId)
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      init(tacticsId){
        console.log('没？？？',tacticsId)
        if(tacticsId) this.getIndexList(tacticsId)
        else this.indexList=[]
      },
      getIndexList(tacticsId){
        this.fetch({name:"getTacticsIndexList",data:{tacticsId}})
          .then(res=>{
            console.log('获取该策略下的指标-------',res)
            this.indexList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addBtn(){//parentId
        let tmp={tacticsId:this.tacticsId,name:'',description:'',data:{},edit:true}
        console.log('看看参数-----',tmp)
        this.indexList.push(tmp)
      },
      editBtn(row){
        if(!row.edit){
          Vue.set(row,'edit',true)
          return
        }
        row.edit=!row.edit
      },
      confirmBtn(row){
        if(this.tacticsId) this.createTacticsIndex(row)
        else {
          console.log('先创建',row)
          row.edit=false
        }
      },
      createTacticsIndex(data){
        this.fetch({name:"createTacticsIndex",data})
          .then(res=>{
            console.log('创建成功-------',res)
            data.edit=false
            this.init(this.tacticsId)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      delBtn(scope){
        if(!scope.row.id){
          this.indexList.splice(scope.$index,1)
          return
        }
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteFamilyTacticsIndex",data:{id:scope.row.id}})
              .then(res=>{
                console.log('删除成功----------')
                this.init(this.tacticsId)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    }
  }
</script>

<style scoped>

</style>
